<template>
  <!-- 放置一个图标 -->
  <div>
    <!--
      svg-icon 内置全局组件:
      用法: icon-class="svg目录下图片名字"

      全屏图标切换:
      1. 不是全屏: 显示 fullscreen
      2. 是全屏: 显示 exit-fullscreen
    -->
    <svg-icon :icon-class="isFull?'exit-fullscreen':'fullscreen'" class="fullscreen" @click="toggleScreen" />
  </div>
</template>

<script>
import sf from 'screenfull'

export default {
  name: 'ScreenFull',
  data() {
    return {
      isFull: false // 是否是全屏: false 不是 | true 是
    }
  },
  created() {
    this.watchScreen()
  },
  methods: {
    // 点击切换全屏
    toggleScreen() {
      // 浏览器兼容性判断: 是否支持全屏 -> 支持: sf.isEnabled = true
      if (sf.isEnabled) {
        // sf.toggle() 方法切换全屏
        sf.toggle()
      }
    },

    watchScreen() {
      if (sf.isEnabled) {
        sf.on('change', () => {
          // sf.isFullscreen: true 进入全屏了 | false 退出全屏
          // console.log('全屏状态: ', sf.isFullscreen)
          this.isFull = sf.isFullscreen
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
